import React from 'react';
import { NavBar, Icon,Carousel,Card } from 'antd-mobile';
// 引入导航的图片
import nav1 from "../../assets/images/nav-1.png"
import nav2 from "../../assets/images/nav-2.png"
import nav3 from "../../assets/images/nav-3.png"
import nav4 from "../../assets/images/nav-4.png"

import GetCity from "../../components/GetCity/GetCity"
// 组合导航的数据

let navarr=[
    {img:nav1,txt:"整租"},
    {img:nav2,txt:"合租"},
    {img:nav3,txt:"地图找房"},
    {img:nav4,txt:"去出租"},
]
class Index extends React.Component {
    state={
        lbarr:[],// 轮播数据
        islb:0,// 是否渲染轮播
        grarr:[],// 租房小组数据
        newsarr:[]// 资讯数据
    }
    render() { 
        return <div>
          <NavBar
            mode="dark"
            leftContent={<GetCity/>}
            onLeftClick={() =>{
                this.props.history.push("/city")
            }}
            >首页</NavBar>

            {/* 轮播 */}

            {
                this.state.islb?
                <Carousel
                    autoplay={true}
                    infinite
                    autoplayInterval={1000}
                    
                    >
                    {
                    this.state.lbarr.map(v =>{
                    return <img
                        src={v.imgSrc}
                        alt=""
                    
                    />
                    } )
            
            
            }
        </Carousel>:
        ''
            } 

            {/* 导航 */}
            <div style={{
                height:"100px",
                background:"white",
                display:"flex",
                justifyContent:"space-between",
                padding:"20px"
            }}>
                {
                    navarr.map((v,k)=>{
                        return <div>
                            <div>
                                <img onClick={()=>{
                                    this.props.history.push("/nav/house")
                                }} width="60" src={v.img}/>
                            </div>
                            <div>
                                <h3 style={{textAlign:"center"}}>
                                    {v.txt}
                                </h3>
                            </div>
                        </div>
                    })
                }

            </div>
             {/* 租房小组 */}

             <h3>租房小组</h3>

             <div style={{
                 padding:"10px",
                 boxSizing:"border-box",
                 display:"flex",
                 flexWrap:"wrap",
                 height:"250px",
                 justifyContent:"space-around",
                 alignContent:"space-around"

             }}>
                {
                    this.state.grarr.map(v=>{
                       return <div style={{
                           display:"flex",
                           width:"160px",
                           background:"white",
                           padding:"10px",
                           boxSizing:"border-box",
                           borderRadius:"5px"

                       }}>
                          <div>
                            <img width="70" src={v.imgSrc}/>
                          </div>
                          <div>
                              <h4>
                                  {v.title}
                              </h4>
                              <p>
                              {v.desc}
                              </p>
                          </div>
                        </div>
                    })
                }
             </div>

             <h3>资讯</h3>

             <div>
                 {
                     this.state.newsarr.map(v=>{
                         return <Card style={{
                             marginTop:"5px"
                         }}>
                         <Card.Header
                             title={v.title}
                             
                             
                         />
                         <Card.Body style={{
                             textAlign:"center"
                         }}>
                             <img src={v.imgSrc} />
                         </Card.Body>
                         <Card.Footer content={v.from} extra={<div>{v.date}</div>} />
                     </Card>
                     })
                 }
             </div>
        </div>;


    }

    getLb(){// 获取轮播数据
        this.api.getLb()
        .then(res=>{
            console.log(res);
            this.setState({
                lbarr:res.data.msg,
                islb:true
            })
        })
    }

    getGroup(){// 获取租房小组数据
       this.api.getGroup()
       .then(res=>{
           console.log(res);
           this.setState({
               grarr:res.data.msg
           })
       })
    }
    getNews(){
        this.api.getNews()
        .then(res=>{
            console.log(res);
            this.setState({
                newsarr:res.data.msg
            })
        })
    }
    componentDidMount(){
        this.getLb()
        this.getGroup()
        this.getNews()
    }
}
 
export default Index;